<template>
	<view>
		<view class="search-header">
			<view class="search">
				<text class="iconfont icon-fangdajing1 bw-search"></text>
				<input type="text" placeholder="请输入产品名称" v-model="keyword" />
				<button @click="confirm">搜索</button>
			</view>
		</view>

		<view class="bw-bottom-body">
			<text>历史搜索</text>
			<text>搜索热词</text>
			<view class="search-lists">
				<view v-for="(a_item,a_index) in searchs" :key="a_index" :class="{'active':a_index == 0}"
					@click="getsearch(a_item)">
					<text style="font-size:28rpx;">{{a_item.keyword}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hot_search_log,
		searchList
	} from '../../../api/shop.js';
	export default {
		data() {
			return {
				searchs: [],
				keyword: ''
			}
		},
		async mounted() {
			try {
				const res = await hot_search_log();
				this.searchs = res.data.list;
				console.log(res);
			} catch (e) {
				//TODO handle the exception
				console.log(e);
			}
		},
		methods: {
			//搜索
			async confirm() {
				try{
					const res = await searchList({keyword:this.keyword});
					console.log(res);
				}catch(e){
					console.log(e);
				}
			},
			// 获取搜索内容
			getsearch(a_item) {
				this.keyword = a_item.keyword;
				console.log(a_item);
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../../iconfont.scss";

	page {
		background-color: #eef2f7;
	}

	.search-header {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;

		.search {
			width: 92%;
			height: 60rpx;
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			border-radius: 50rpx;
			border: 1px solid #ec5990;
			margin: 0px auto;
			display: flex;
			align-items: center;

			.bw-search {
				font-size: 40rpx;
				padding: 20rpx;
			}

			button {
				width: 20%;
				background-color: #ec5990;
				border-radius: 50rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			input {
				width: 64%;
				height: auto;
				font-size: 29rpx;
				padding-left: 20rpx;
			}
		}
	}

	.bw-bottom-body {
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 60rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;

		text {
			display: block;
			font-size: 33rpx;
			font-weight: 500;
			padding-left: 30rpx;
			padding-top: 30rpx;
		}

		.search-lists {
			display: flex;
			flex-wrap: wrap;

			view {
				// width:25%;
				padding-left: 20rpx;
				padding-right: 20rpx;
				margin-left: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin-top: 30rpx;
				background-color: #f0f1f6;
				border-radius: 50rpx;

				text {
					font-size: 28rpx;
					padding-top: 0rpx;
					padding-left: 0rpx;
				}
			}
		}
	}

	.active {
		border: 1px solid #f5aec9;
		background-color: #FFFFFF !important;
		color: #ec578f;
	}
</style>
